<template>
  <div>
    <van-space></van-space>
    <van-row>
      <div id="video" :class="videoImg">
        <img :src="img" alt="视频">
      </div>
    </van-row>
    <van-space></van-space>
    <van-row align="center">
      <van-col offset="1" span="4">
        <a-switch checked-color="#14C9C9" unchecked-color="rgb(var(--gray-4)" @change="lightSwitch">
          <template #checked>
            <icon-sun-fill size="2em"/>
          </template>
          <template #unchecked>
            <icon-sun-fill size="2em"/>
          </template>
        </a-switch>
      </van-col>
      <van-col span="5" >
        <van-button icon="arrow-left" @touchstart="go(2,['3'])"/>
      </van-col>
      <van-col span="5">
        <van-button icon="arrow-up" @touchstart="go(2,['0'])"/>
      </van-col>
      <van-col span="4">
        <van-button icon="arrow" @touchstart="go(2,['2'])"/>
      </van-col>
      <van-col span="4">
        <a-switch checked-color="#F53F3F" unchecked-color="rgb(var(--gray-4)" @change="videoSwitch">
          <template #checked>
            <icon-video-camera size="2em"/>
          </template>
          <template #unchecked>
            <icon-video-camera size="2em"/>
          </template>
        </a-switch>
      </van-col>

    </van-row>
    <van-space></van-space>
    <van-space></van-space>
    <van-row align="center">
      <van-col offset="4" span="15" >
        <van-slider v-model="yawRate"  style="box-shadow: 0 0 1px 1px #DDD  ;" active-color="#F4F4F4" :min="-100"
                       :max="100" bar-height="2em" inactive-color="#F4F4F4" @drag-end="yawRateReset" @update:model-value="setYawRate">
          <template #button>
            <div class="slider_ball_yaw">{{ yawRate }}</div>
          </template>
        </van-slider>

      </van-col>


    </van-row>
    <van-space></van-space>
    <van-space></van-space>
    <van-row align="center">
      <van-col offset="1" span="4">
        <van-button   @click="go(3,['2'])">
          坐
        </van-button>
      </van-col>
      <van-col  span="4">
        <van-button type="primary" plain hairline @click="go(3,['1'])">
          <template #icon>
            <icon-refresh></icon-refresh>
          </template>
        </van-button>
      </van-col>

      <van-col offset="1" span="4">
        <van-button icon="arrow-down" @touchstart="go(2,['1'])"/>
      </van-col>
      <van-col offset="1" span="4">
        <van-button type="warning" plain hairline @click="go(3,['0'])">
          <template #icon>
            <van-icon name="pause-circle-o" />
          </template>
        </van-button>
      </van-col>
    </van-row>
    <van-space></van-space>
    <van-collapse v-model="active_item">
      <van-collapse-item title="设置" name="robot_settings" icon="setting-o" v-if="version2">
        <van-row align="center" justify="center">
          <van-space></van-space>
          <van-col span="6">镜头上下调节</van-col>
          <van-col span="18">
            <div>
              <van-slider v-model="gimbal" active-color="#37c279" @change="sendUpDownPos()" :min="0"
                          :max="maxUpDownGimbal">
                <template #button>
                  <div class="slider_ball_hr">{{ gimbal }}</div>
                </template>
              </van-slider>
            </div>
          </van-col>

        </van-row>
        <van-space></van-space>
        <van-row align="center" justify="center">
          <van-space></van-space>
          <van-col span="6">步高</van-col>
          <van-col span="18">
            <div>
              <van-slider v-model="stepHeight" active-color="#37c279" @change="sendStepHeight()" :min="1"
                          :max="50">
                <template #button>
                  <div class="slider_ball_hr">{{ stepHeight }}</div>
                </template>
              </van-slider>
            </div>
          </van-col>

        </van-row>
        <van-space></van-space>
        <van-row align="center" justify="center">
          <van-space></van-space>
          <van-col span="6">步长</van-col>
          <van-col span="18">
            <div>
              <van-slider v-model="stepLength" active-color="#37c279" @change="sendStepLength()" :min="1"
                          :max="100">
                <template #button>
                  <div class="slider_ball_hr">{{ stepLength }}</div>
                </template>
              </van-slider>
            </div>
          </van-col>

        </van-row>
        <van-space></van-space>
        <van-row>
          <van-col offset="1">
            <span>预设参数</span>
          </van-col>
        </van-row>
        <van-row>
          <van-col offset="1" span="6">
            <van-button @click="forRotationAtLowSpeed" plain type="primary">
              低速旋转
            </van-button>
          </van-col>
          <van-col offset="1" span="6">
            <van-button @click="forWalk" plain type="primary">
              正常步行
            </van-button>
          </van-col>
          <van-col offset="1" span="6">
            <van-button @click="forClimbing" plain type="primary">
              跨越障碍
            </van-button>
          </van-col>
        </van-row>
      </van-collapse-item>
      <van-collapse-item title="舵机调试面板" name="servo" icon="apps-o">
        <van-space></van-space>
        <van-row align="center" justify="center">
          <van-col span="6">
            <div class="slider-dev-v">
              <van-slider v-model="servo[0]" vertical @change="quadrupedTurn(0)" active-color="#37c279">
                <template #button>
                  <div class="slider_ball">{{ servo[0] }}</div>
                </template>
              </van-slider>
            </div>
          </van-col>
          <van-col span="6">
            <div class="slider-dev-v">
              <van-slider v-model="servo[1]" vertical @change="quadrupedTurn(1)" active-color="#37c279">
                <template #button>
                  <div class="slider_ball">{{ servo[1] }}</div>
                </template>
              </van-slider>
            </div>
          </van-col>
          <van-col span="6">
            <div class="slider-dev-v">
              <van-slider v-model="servo[2]" vertical @change="quadrupedTurn(2)" active-color="#37c279">
                <template #button>
                  <div class="slider_ball">{{ servo[2] }}</div>
                </template>
              </van-slider>
            </div>
          </van-col>
          <van-col span="6">
            <div class="slider-dev-v">
              <van-slider v-model="servo[3]" vertical @change="quadrupedTurn(3)" active-color="#37c279">
                <template #button>
                  <div class="slider_ball">{{ servo[3] }}</div>
                </template>
              </van-slider>
            </div>
          </van-col>
          <van-col span="4"></van-col>
        </van-row>
        <van-space></van-space>
        <van-row align="center" justify="center">
          <van-col span="6">
            <van-stepper v-model="servo[0]" min="0" max="100" input-width="2em" button-size="1.8em"/>
          </van-col>
          <van-col span="6">
            <van-stepper v-model="servo[1]" min="0" max="100" input-width="2em" button-size="1.8em"/>
          </van-col>
          <van-col span="6">
            <van-stepper v-model="servo[2]" min="0" max="100" input-width="2em" button-size="1.8em"/>
          </van-col>
          <van-col span="6">
            <van-stepper v-model="servo[3]" min="0" max="100" input-width="2em" button-size="1.8em"/>
          </van-col>
        </van-row>
        <van-space></van-space>
        <van-row align="center" justify="center">
          <van-col span="6">
            <div class="slider-dev-v">
              <van-slider v-model="servo[4]" vertical @change="quadrupedTurn(4)" active-color="#37c279">
                <template #button>
                  <div class="slider_ball">{{ servo[4] }}</div>
                </template>
              </van-slider>
            </div>
          </van-col>
          <van-col span="6">
            <div class="slider-dev-v">
              <van-slider v-model="servo[5]" vertical @change="quadrupedTurn(5)" active-color="#37c279">
                <template #button>
                  <div class="slider_ball">{{ servo[5] }}</div>
                </template>
              </van-slider>
            </div>
          </van-col>
          <van-col span="6">
            <div class="slider-dev-v">
              <van-slider v-model="servo[6]" vertical @change="quadrupedTurn(6)" active-color="#37c279">
                <template #button>
                  <div class="slider_ball">{{ servo[6] }}</div>
                </template>
              </van-slider>
            </div>
          </van-col>
          <van-col span="6">
            <div class="slider-dev-v">
              <van-slider v-model="servo[7]" vertical @change="quadrupedTurn(7)" active-color="#37c279">
                <template #button>
                  <div class="slider_ball">{{ servo[7] }}</div>
                </template>
              </van-slider>
            </div>
          </van-col>
          <van-col span="4"></van-col>
        </van-row>
        <van-space></van-space>
        <van-row align="center" justify="center">
          <van-col span="6">
            <van-stepper v-model="servo[4]" min="0" max="100" input-width="2em" button-size="1.8em"/>
          </van-col>
          <van-col span="6">
            <van-stepper v-model="servo[5]" min="0" max="100" input-width="2em" button-size="1.8em"/>
          </van-col>
          <van-col span="6">
            <van-stepper v-model="servo[6]" min="0" max="100" input-width="2em" button-size="1.8em"/>
          </van-col>
          <van-col span="6">
            <van-stepper v-model="servo[7]" min="0" max="100" input-width="2em" button-size="1.8em"/>
          </van-col>
        </van-row>
        <van-space></van-space>
      </van-collapse-item>
    </van-collapse>
  </div>
</template>
<script>
import axios from "axios";

import {video_svg} from "@/js/res";
import {IconRefresh, IconVideoCamera, IconSunFill} from "@arco-design/web-vue/es/icon";
import {Message} from "@arco-design/web-vue";
import {cmdChannel} from "@/js/on_start";


export default {
  name: 'cam_quadruped',
  components: {
    IconRefresh,
    IconVideoCamera,
    IconSunFill
  }
  , data() {
    return {
      servo: [50, 50, 50, 50,
        50, 50, 50, 50],
      gimbal: 30,
      stepLength: 80,
      stepHeight: 30,
      active_item: [],
      robot_settings: [],
      sn: '',
      maxUpDownGimbal: 60,
      websocket: null,
      img: video_svg,
      videoImg: 'videoImg',
      attachVideoChannel: {
        devSn: "",
        channelIndex: 0,
        channelType: 0 // mjpeg
      },
      version2: false,
      yawRate: 0,
    }
  },
  created() {
    this.sn = history.state['sn'];
    if (process.env.NODE_ENV === 'development') {
      Message.info({content: `this sn is  ${this.sn}`, showIcon: true});
    }
    let currentLightDev = window.currentLightDev;
    if (currentLightDev.maxUpDownGimbal && currentLightDev.maxUpDownGimbal > 0 && currentLightDev.maxUpDownGimbal < 100) {
      this.maxUpDownGimbal = currentLightDev.maxUpDownGimbal
    } else {
      this.maxUpDownGimbal = 60
    }
    this.attachVideoChannel.channelIndex = currentLightDev['channelIndex'];
    this.attachVideoChannel.devSn = this.sn;
    if (currentLightDev.version) {
      this.version2 = currentLightDev.version > '1.0';
    }
  }, methods: {
    send(opcode, params) {
      cmdChannel.sendRawCmd(this.sn, opcode, params);
    },
    go(opcode, params){
      this.yawRate = 0;
      cmdChannel.sendRawCmd(this.sn, opcode, params);
    },
    quadrupedTurn(index) {
      cmdChannel.sendRawCmd(this.sn, 1, ['' + index, '' + this.servo[index]]);
    },
    sendUpDownPos() {
      cmdChannel.sendRawCmd(this.sn, 7, ['0', '' + this.gimbal]);
    },
    sendStepHeight() {
      cmdChannel.sendRawCmd(this.sn, 7, ['2', '' + this.stepHeight]);
    },
    sendStepLength() {
      cmdChannel.sendRawCmd(this.sn, 7, ['3', '' + this.stepLength]);
    },
    sendStepArg() {
      cmdChannel.sendRawCmd(this.sn, 7, ['2', '' + this.stepHeight]);
      cmdChannel.sendRawCmd(this.sn, 7, ['3', '' + this.stepLength]);
    },
    forRotationAtLowSpeed() {
      this.stepHeight = 20;
      this.stepLength = 40;
      this.sendStepArg();
    },
    forWalk() {
      this.stepHeight = 26;
      this.stepLength = 45;
      this.sendStepArg()
    },
    forClimbing() {
      this.stepHeight = 50;
      this.stepLength = 80;
      this.sendStepArg()
    },
    setYawRate() {
      cmdChannel.sendRawCmd(this.sn, 7, ['4', '' + (this.yawRate + 100)]);
    }
    ,yawRateReset() {
      this.yawRate = 0;
      cmdChannel.sendRawCmd(this.sn, 7, ['4', '' + (this.yawRate + 100)]);
    },

    videoSwitch(event) {
      if (event) {
        let attachVideoChannel = this.attachVideoChannel;

        let url = '/dm/attachVideoChannel';
        if (process.env.NODE_ENV === 'development') {
          url = window.dev.httpUrlBase + url;
        }
        axios.post(url, attachVideoChannel).then(console.log).catch(console.log)
        this.img = window.lightServerVideoBase + this.sn
        this.send(4, ['0']);
        this.videoImg = 'video';
      } else {
        this.send(4, ['1']);
        this.img = video_svg;
        this.videoImg = 'videoImg';

      }
    },
    lightSwitch(event) {
      this.send(4, event ? ['2'] : ['3']);
    },
    stepHighSwitch(event) {
      this.send(3, event ? ['2'] : ['3']);
    },
    stepLengthSwitch(event) {
      this.send(3, event ? ['4'] : ['5']);
    }
  }
}
</script>
<style>
.slider-dev-v {
  height: 14em;
  text-align: center;
}

.slider_ball {
  width: 2em;
  height: 2em;
  color: #fff;
  text-align: center;
  background-color: var(--van-success-color);
  border-radius: 50%;
  vertical-align: middle;
  line-height: 2em;
}

.slider_ball_hr {
  width: 1.8em;
  height: 1.8em;
  color: #fff;
  text-align: center;
  background-color: var(--van-success-color);
  border-radius: 50%;
  vertical-align: middle;
  line-height: 1.8em;
}

.slider_ball_yaw {
  width: 2.0em;
  height: 2.5em;
  text-align: center;
  border-radius: 0.2em 0.2em 0.2em 0.2em ;
  //border: solid 1px;
  vertical-align: middle;
  line-height: 2.5em;
  background-color:  var(--van-primary-color);
  user-select: none;
  color: #FFF;
}
</style>